<script lang="tsx">
export const gameSharePopup = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./GameShare.vue')),
  {
    title: toRef(() => $t('ax0ktMuEro7TOhBlN80H5')),
    wrapClassName: 'ant-cover__Modal',
    width: 400,
    centered: true,
    footer: null,
  },
);
</script>

<script setup lang="tsx">
const props = defineProps<{
  gameCode: string;
}>();

const appStore = useAppStore();
const userStore = useUserStore();
const shareUrl = computed(() => {
  const url = new URL(`${appStore.handshake?.domain.www ?? location.origin}/share/site`);
  url.searchParams.append('game_code', props.gameCode);
  url.searchParams.append('ic', userStore.userInfo?.referral_code ?? '');

  return url.toString();
});

function ShareItem(props: { logo: string; url: string }) {
  const logo = new URL(`./imgs/${props.logo}.webp`, import.meta.url).href;

  return (
    <a class="block size-10 transition-all hover:-transform-translate-y-1" target="_blank" rel="noopener noreferrer" href={props.url}>
      <img class="block size-full" src={logo} />
    </a>
  );
}
</script>

<template>
  <div class="grid auto-rows-auto grid-cols-[repeat(4,auto)] my-6 justify-evenly gap-6">
    <ShareItem logo="facebook" :url="`https://www.facebook.com/sharer.php?u=${shareUrl}&title=${props.gameCode}`" />
    <ShareItem logo="twitter" :url="`https://twitter.com/share?url=${shareUrl}&text=${props.gameCode}&hashtags=${appStore.handshake?.app_name},${props.gameCode}`" />
    <ShareItem logo="tg" :url="`https://t.me/share?url=${shareUrl}&text=${props.gameCode}`" />
    <ShareItem logo="vk" :url="`http://vk.com/share.php?url=${shareUrl}&title=${props.gameCode}`" />
    <ShareItem logo="line" :url="`https://lineit.line.me/share/ui?url=${shareUrl}&title=${props.gameCode}`" />
    <ShareItem logo="skype" :url="`https://web.skype.com/share?url=${props.gameCode}%0D%0A${shareUrl}`" />
    <ShareItem logo="linkedin" :url="`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`" />
    <ShareItem logo="whatsapp" :url="`https://api.whatsapp.com/send?text=${props.gameCode}%0D%0A${shareUrl}`" />
  </div>
</template>
